<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
  <head>
    <title>ImageTools Demo Page</title>

    <style>
      .options {
        display: none;
      }

      #selector,
      .options input {
        margin-right: 10px;
      }

      .options input {
        width: 30px;
      }
    </style>
  </head>

  <body>
    <h2>ImageTools Demo Page</h2>

    <input type="file" onchange="loadImage(this.files[0])" />

    <div class="toolbar">
      <select id="selector" onchange="showOptions(this.options[this.selectedIndex].value)">
        <option value="">Select...</option>
        <option value="sharpen">Sharpen</option>
        <option value="invert">Invert</option>
        <option value="emboss">Emboss</option>
        <option value="resize">Resize</option>
        <option value="crop">Crop</option>
        <option value="rotate">Rotate</option>
      </select>

      <form id="sharpen" class="options">
        <button type="submit">Go</button>
      </form>

      <form id="invert" class="options">
        <button type="submit">Go</button>
      </form>

      <form id="emboss" class="options">
        <button type="submit">Go</button>
      </form>

      <form id="resize" class="options">
        w: <input type="text" name="width" />
        h: <input type="text" name="height" />
        <button type="submit">Go</button>
      </form>

      <form id="crop" class="options">
        x: <input type="text" name="x" />
        y: <input type="text" name="y" />
        w: <input type="text" name="width" />
        h: <input type="text" name="height" />
        <button type="submit">Go</button>
      </form>

      <form id="rotate" class="options">
        deg: <input type="text" name="deg" />
        <button type="submit">Go</button>
      </form>

      <button onclick="window.location.reload()">Reset</button>
    </div>

    <br />

    <img id="editor" src="../images/test.jpeg" />


    <script type="text/javascript" src="../../../scratch/compiled/demo.js"></script>
    <script type="text/javascript">
      var currOp;
      function showOptions(op) {
        if (currOp) {
          document.getElementById(currOp).style.display = 'none';
        }
        if (op) {
          document.getElementById(op).style.display = 'inline';
        }
        currOp = op;
      }


      function loadImage(file) {
        var editor = document.getElementById('editor');
        var fr = new FileReader;

        fr.onload = function() {
          editor.src = this.result;
        };

        fr.readAsDataURL(file);
      }
    </script>


  </body>
</html>
